<template>
    <div>
        <div>app-{{ msg }}</div>
        <button @click="handleClick">click</button>
        <div>
            <!-- {{ state.myage }}---{{ state.myage }} -->
            {{ myname }}---{{ myage }}
        </div>
        <div>{{ computedName }}</div>
        <Child title="666" @childEvent="handleEvent"></Child>
    </div>
</template>
<script setup>
import { computed, reactive, ref, toRefs } from 'vue';
import Child from './Child.vue'; //直接引入即可，不用注册

//ref
const msg = ref("hello vue3")

//reactive
const state = reactive({
    myname: "kerwin",
    myage: 100
})

//toRefs
const { myname, myage } = { ...toRefs(state) }

//computed
const computedName = computed(() => myname.value.substring(0, 1).toUpperCase() + myname.value.substring(1))

//methods
const handleClick = () => {
    msg.value = "hello TS"
}

const handleEvent = (value) => {
    console.log("收到子组件传来的消息：", value);
}

</script>